<template>
  <div class="page">
    <navigation>{{ $t('我的推荐') }}</navigation>
    <div class="referral-qr">
      <div class="qrcode-img">
        <img :src="info.img" class="img" />
      </div>
      <div class="qrcode-txt">{{ $t('邀请码') }}：<span>{{ info.code }}</span></div>
      <div class="btns">
        <button type="button" class="btn" @click="execCommand">{{ $t('复制链接') }}</button>
        <nuxt-link to="referral" class="btn">{{ $t('我的推荐') }}</nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Toast } from 'mint-ui'
import { copyText } from '@/utils/dom'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      info: {}
    }
  },
  beforeMount () {
    this.getReferralInfo()
      .then((data) => {
        this.info = data.data
      })
  },
  methods: {
    ...mapActions({
      getReferralInfo: 'user/getReferralInfo'
    }),
    execCommand () {
      if (copyText(this.info.url)) {
        Toast(this.$t('复制成功'))
      } else {
        Toast('复制失败')
      }
    }
  }
}
</script>
<style scoped>
.page {
  height: calc(100vh - 50px);
  background: #1b8afe;
  background: -webkit-linear-gradient(to bottom, #1b8afe 0%,#d40ffc 100%);
  background: linear-gradient(to bottom, #1b8afe 0%,#d40ffc 100%)
}
.referral-qr {
  padding-top: 20%;
}
.qrcode-img {
  width: 120px;
  height: 120px;
  padding: 10px;
  background-color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.qrcode-img .img {
  width: 100%;display: block;
}
.qrcode-txt {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}
.qrcode-txt span {
  color: #ffffff;
  font-weight: 500;
}
.btns {
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  line-height: 32px;
  border-radius: 5px;
  text-align: center;
  width: 25vw;
  margin: 0 10px;
  color: #ffffff;
  background: #1b8afe;
  background: -webkit-linear-gradient(to right, #02d9ff 0%,#1b8afe 100%);
  background: linear-gradient(to right, #02d9ff 0%,#1b8afe 100%)
}
</style>
